<template>
	<view class="page-container back-grey-light prow-lg pcol-l">
		<!-- 背景 -->
		<view class="back-primary back"></view>
		<!-- 内容区 -->
		<view class="content">
			<!-- 驳回原因 -->
			<view v-if="status==2" class="radius-lg prow-lg pcol-lg mb-l message-content" style="background: rgba(255, 255, 255, 0.5);">
				<text class="bold" style="color: #e94242;text-decoration: underline;">审核驳回{{ messageContent?'：'+messageContent:'' }}</text>
			</view>
			<!-- 表单 -->
			<view class="radius-lg back-white prow-lg form">
				<view class="prow-l item">
					<text>姓名</text>
					<u-input v-model="name" type="text" :maxlength="10" placeholder="请填写姓名" placeholder-style="color: #999;font-size: 28rpx;"/>
				</view>
				<view class="prow-l item" @click="goCollegeSelect()">
					<text>学校</text>
					<text v-if="schoolName">{{ schoolName }}</text>
					<text v-else class="grey-light">请选择学校</text>
				</view>
				<view class="prow-l item">
					<text>学号</text>
					<u-input v-model="studentId" type="text" :maxlength="16" placeholder="请填写学号" placeholder-style="color: #999;font-size: 28rpx;"/>
				</view>
				<view class="prow-l item">
					<text>入学年份</text>
					<u-input v-model="startYear" type="text" :maxlength="6" placeholder="请填写入学年份" placeholder-style="color: #999;font-size: 28rpx;"/>
				</view>
				<view class="prow-l item">
					<view class="row-box">
						<text>备注</text>
						<text class="grey-light s24">（选填）</text>
					</view>
					<u-input v-model="remarks" type="text" placeholder="请填写备注" placeholder-style="color: #999;font-size: 28rpx;"/>
				</view>
				<view class="prow-l card-area">
					<view v-if="!card" class="row-box center radius-lg card-box" @click="selectUploadHandle()">
						<image class="icon36 l t" src="../static/左上.png"></image>
						<image class="icon36 r t" src="../static/右上.png"></image>
						<image class="icon36 r b" src="../static/右下.png"></image>
						<image class="icon36 l b" src="../static/左下.png"></image>
						<view class="col-box center">
							<image class="icon76" src="../static/学生证.png"></image>
							<text class="mt-base grey-light">请上传学生证</text>
						</view>
					</view>
					<view v-else class="row-box center radius-lg card-box back-black">
						<image class="card" :src="card" mode="aspectFit" @click.stop="previewImage(0, [card])"></image>
						<view v-if="status==-1 || status==2" class="row-box center radius-circle back-primary icon-box" @click.stop="card=''">
							<u-icon name="close" color="#ffffff" size="28" :bold="true"></u-icon>
						</view>
					</view>
				</view>
				<view class="pall-l col-box">
					<text class="s24 grey-light">提示：</text>
					<text class="s24 grey-light">1.&nbsp;请上传清晰的学生证信息页，包含姓名学号等信息。</text>
					<text class="s24 grey-light">2.&nbsp;一个证件只能认证一个账号。</text>
				</view>
			</view>
		</view>
		
		<!-- 提交按钮 -->
		<view class="submit-button-box" style="padding-top: 40rpx;">
			<view class="submit-button" :class="buttonBackClass" @click="submitHandle()">{{ statusArr[status+1] }}</view>
		</view>
	</view>
</template>

<script>
	import env from '@/utils/env.js'
	import { mapState } from "vuex"
	export default {
		data() {
			return {
				qntoken: '',  // 七牛云上传token
				name: '', // 姓名
				schoolId: null, // 学校id
				schoolName: '', // 学校name
				studentId: '', // 学号
				startYear: '', // 入学年份
				remarks: '', // 备注
				last: '', // 回显的学生证临时地址
				card: '', // 学生证临时地址
				cardUpload: '', // 学生证上传后地址
				
				// agree: false, // 是否勾选同意
				status: -1, // 状态,0: 待审核；1:审核通过；2: 审核失败
				statusArr: ['提交认证', '待审核', '审核通过', '重新提交'],
				messageContent: '驳回原因', // 审核驳回原因
			};
		},
		computed: {
			// 底部按钮颜色
			buttonBackClass() {
				if (this.status==-1) {
					return 'back-primary'
				} else if (this.status==0) {
					return 'back-text-grey'
				} else if (this.status==1) {
					return 'back-gold'
				} else if (this.status==2) {
					return 'back-primary'
				}
			}
		},
		watch: {
			// 侦听学生证上传后地址
			cardUpload(newValue, oldValue) {
				if (newValue) {
					// 上传完图片
					// 调用提交接口
					this.submit()
				}
			},
		},
		onLoad(options) {
			// 获取七牛上传使用TOKEN
			this.getUploadToken()
			// 获取认证详情
			this.getSettleInfo()
		},
		onShow() {
			
		},
		methods: {
			// 跳转选择学校
			goCollegeSelect() {
				if (this.status!=-1 && this.status!=2) return
				uni.navigateTo({
					url: '/pages/subPackage/platform/college_list/college_list'
				})
			},
			
			// 选择图片上传前的处理
			async selectUploadHandle() {
				this.card = await this.chooseSingelImage()
			},
			
			// 点击提交
			submitHandle() {
				if (this.status!=-1 && this.status!=2) return
				if (!this.name) {
					return uni.showToast({
						icon: 'none',
						title: `未填写姓名！`
					})
				} else if (!this.schoolId) {
					return uni.showToast({
						icon: 'none',
						title: '未选择学校！'
					})
				} else if (!this.studentId) {
					return uni.showToast({
						icon: 'none',
						title: '未填写学号！'
					})
				} else if (!this.startYear) {
					return uni.showToast({
						icon: 'none',
						title: '未填写入学年份！'
					})
				} else if (!this.card) {
					return uni.showToast({
						icon: 'none',
						title: '未选择学生证照片！'
					})
				}
				
				uni.showLoading({
					title: '提交中...',
					mask: true
				})
				
				if ((this.last == this.card) && this.last) { // 未修改学生证跳过上传
					// 提交接口
					this.submit()
				} else { // 不同学生证
					// 上传学生证
					let pathArr = this.card.split('.')
					let extra = pathArr[pathArr.length-1]
					// 获得唯一标识码
					let uniqueCode = this.generateUUID()
					// case 'ECN': uploadURL = 'https://up.qiniup.com'
					// case 'NCN': uploadURL = 'https://up-z1.qiniup.com'
					// case 'SCN': uploadURL = 'https://up-z2.qiniup.com'
					// case 'NA': uploadURL = 'https://up-na0.qiniup.com'
					// case 'ASG': uploadURL = 'https://up-as0.qiniup.com'
					uni.uploadFile({
						url: 'https://up-z2.qiniup.com',
						filePath: this.card,
						name: 'file',
						formData: {
							'key': uniqueCode + '.' + extra,
							'token': this.qntoken,
						},
						success: (res) => {
							console.log('uni.uploadFile', res)
							let strToObj = JSON.parse(res.data)
							let backUrl = env.imageUrl + strToObj.key
							// 处理上传成功后的返回值
							this.cardUpload = backUrl
						},
						fail: (err) => {
							console.log('uni.uploadFile', err)
							uni.hideLoading()
							uni.showToast({
								icon: 'none',
								title: '提交失败！'
							})
						}
					})
				}
			},
			
			// 提交接口
			submit() {
				let params = {}
				params['name'] = this.name
				params['schoolId'] = this.schoolId
				params['studentId'] = this.studentId
				params['startYear'] = this.startYear
				params['images'] = this.cardUpload ? this.cardUpload : this.last
				if (this.remarks) params['remarks'] = this.remarks
				
				this.$api.AddIdentity(params).then(res => {
					console.log('AddIdentity-success', res)
					uni.hideLoading()
					if (res.data.code == 200) {
						uni.showToast({
							icon: 'none',
							title: '提交成功！',
							success: () => {
								setTimeout(() => {
									// 清空之前的上传地址
									this.cardUpload = ''
									// 重新获取认证详情
									this.getSettleInfo()
								}, 500)
							}
						})
					} else {
						uni.showToast({
							icon: 'none',
							title: res.data.msg
						})
					}
				}).catch(err => {
					console.log('AddIdentity-fail', err)
					uni.hideLoading()
					uni.showToast({
						icon: 'none',
						title: '提交失败！'
					})
				})
			},
			
			// 获取认证详情
			getSettleInfo() {
				this.$api.GetIdentityInfo().then(res => {
					console.log('GetIdentityInfo-success', res)
					if(res.data.code == 200) {
						if (res.data.data == null || res.data.data.id == null) return
						this.status = res.data.data.status
						if (this.status==2) this.messageContent = res.data.data.messageContent
						this.name = res.data.data.name
						this.schoolId = res.data.data.schoolId
						this.schoolName = res.data.data.schoolName
						this.studentId = res.data.data.studentId
						this.startYear = res.data.data.startYear
						this.remarks = res.data.data.remarks
						this.card = res.data.data.images
						this.last = res.data.data.images
					} else {
						uni.showToast({
							icon: 'none',
							title: res.data.msg
						})
					}
				}).catch(err => {
					console.log('GetIdentityInfo-fail', err)
				}).finally(() => {
					
				})
			},
			
		},
	}
</script>

<style lang="scss">
	
	// 背景
	.back {
		width: 100%;
		height: 480rpx;
		position: absolute;
		z-index: 0;
		top: 0;
		left: 0;
	}
	
	// 内容
	.content {
		position: relative;
		z-index: 1;
		.form {
			box-shadow: 0 0 10rpx #d5d5d5;
		}
	}
	
	// 项
	.item {
		height: 96rpx;
		border-bottom: 2rpx solid #f2f2f2;
		display: grid;
		grid-template-columns: 190rpx 1fr;
		align-items: center;
		
	}
	
	// 卡片区域
	.card-area {
		padding-top: 32rpx;
		padding-bottom: 32rpx;
		border-bottom: 2rpx solid #f2f2f2;
	}
	// 卡片盒子
	.card-box {
		height: 288rpx;
		background: $uni-bg-color-primary-10;
		position: relative;
		.icon76 {
			display: block;
			width: 76rpx;
			height: 76rpx;
		}
		.icon36 {
			position: absolute;
			z-index: 9;
			&.l {
				left: -2rpx;
			}
			&.r {
				right: -2rpx;
			}
			&.t {
				top: -2rpx;
			}
			&.b {
				bottom: -2rpx;
			}
		}
		
		&.back-black {
			background: rgba(0, 0, 0, 1);
			.icon-box {
				width: 64rpx;
				height: 64rpx;
				position: absolute;
				top: 0;
				right: 0;
				transform: translateX(20%) translateY(-20%);
				z-index: 9;
			}
		}
		.card {
			display: block;
			width: 100%;
			height: 100%;
		}
	}
</style>
